<template>
	<SearchForm :columns="formColumn" @search="search" @reset="search" />
	<el-main class="nopadding">
		<scTable
			ref="table"
			tableName="studentList"
			v-bind="list"
			row-key="id"
			stripe
		>
			<el-table-column type="selection" width="50"></el-table-column>
			<el-table-column
				label="操作"
				fixed="right"
				align="center"
				width="220"
			>
				<template #default="scope">
					<!-- <el-button
						type="primary"
						plain
						size="small"
						@click="handleSignup(scope.row)"
						>报班</el-button
					> -->
					<el-button
						type="warning"
						plain
						size="small"
						@click="handleClassTransfer(scope.row)"
						>转班</el-button
					>
					<el-button
						type="warning"
						plain
						size="small"
						@click="voluntarilyClass(scope.row)"
						>自然转班</el-button
					>
					<el-button
						type="danger"
						plain
						size="small"
						@click="handleCancelClass(scope.row)"
						>退班</el-button
					>
				</template>
			</el-table-column>
		</scTable>

		<el-dialog
			top="30vh"
			v-model="distributionVisible"
			title="转班"
			width="500px"
		>
		<div class="dialog-content">
			<div>
				<el-select v-model="slectClass" filterable placeholder="请选择">
					<el-option
						v-for="item in classOption"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</div>	
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary"
				@click="sureOperate">
					确定
				</el-button>
				<el-button @click="distributionVisible = false">
					取消
				</el-button>
			</span>
		</template>
		</el-dialog>
		<!-- 报班 -->
		<SignUp
			v-if="drawer.show_signUp"
			@close="drawer.show_signUp = false"
			@success="search"
		/>
		<!-- 转班 -->
		<ClassTransfer
			v-if="drawer.show_classTransfer"
			@close="drawer.show_classTransfer = false"
			@success="search"
		/>
		<!-- 退班 -->
		<CancelClass
			v-if="drawer.show_cancelClass"
			@close="drawer.show_cancelClass = false"
			@success="search"
		/>
	</el-main>
</template>

<script>
import SearchForm from "@/components/SearchForm/index.vue";
import SignUp from "../signUp/index.vue";
import ClassTransfer from "../classTransfer/index.vue";
import CancelClass from '../cancelClass/index.vue';

import { formColumn, column } from "./data";
import { ElMessageBox  } from 'element-plus'

export default {
	components: {
		SearchForm,
		SignUp,
		ClassTransfer,
		CancelClass,
	},
	data() {
		return {
			formColumn,
			list: {
				apiObj: this.$API.student.signUpList,
				params: {
					studentId: parseInt(this.$route.params.id) || null,
				},
				column,
			},
			drawer: {
				show_signUp: false,
				show_classTransfer: false,
				show_cancelClass: false,
			},
			distributionVisible: false,
			classOption: [],
			slectClass: ""
		};
	},
	methods: {
		sureOperate() {
			this.distributionVisible = false
		},
		search(searchParams) {
			let params = {}
			if(searchParams) {
				const searchObj = JSON.parse(JSON.stringify(searchParams))
				params = Object.assign({}, searchObj, this.list.params)
			}else{
				params = Object.assign({}, this.list.params, {});
			}
			this.$refs.table.reload(params);
		},
		handleSignup(row) {
			this.drawer.show_signUp = true;
		},
		handleClassTransfer(row) {
			this.distributionVisible = true
			// this.drawer.show_classTransfer = true;
		},
		// 退班
		handleCancelClass(row) {
			// this.drawer.show_cancelClass = true;
			ElMessageBox.confirm('确认退班?','信息',
    	 	{
    	 	  confirmButtonText: '确定',
    	 	  cancelButtonText: '取消',
					buttonSize: "small"
    	 	}
 			).then(() => {

			})
    	.catch(() => {})
		},
		// 自然转班
		voluntarilyClass(row) {
			ElMessageBox.confirm('确认自然转班?','信息',
    	 	{
    	 	  confirmButtonText: '确定',
    	 	  cancelButtonText: '取消',
					buttonSize: "small"
    	 	}
 			).then(() => {

			})
    	.catch(() => {})
		}
	},
};
</script>

<style scoped lang="scss">
.dialog-content {
	.el-select  {
		width: 100%;
	}
}
</style>
